.container{
    width: 600px;
    height: 400px;
    background-color: rgb(226, 168, 168);
    /* 开启flex布局 */
    display: flex;
    /* 决定主轴的方向 */
    /* flex-direction: row; */
    /* 换行处理,，默认值为nowrap，即不换行 */
    /* flex-wrap: wrap; */
    /* flex-direction flex-wrap的缩写 */
    flex-flow: row wrap;
    /* justify-content 处理主轴方向的对齐 */
    /*center space-between space-around */
    justify-content:space-around;
    /* 如果主轴是x轴，主要是处理一行，否则就主要是处理一列 */
    /* align-items: baseline; */
    /* 主要是处理多排多列 */
    /* align-content: stretch */
}
.item{
    width: 100px;
    height: 100px;
    background-color: rgb(196, 226, 168);
    border:1px solid black;

}

.item:nth-child(2){
    /* 开启flex以后，子元素浮动没有效果 */
    /* float: right; */
    font-size: 2em
}
.item:nth-child(3){
    /* 开启flex以后，子元素浮动没有效果 */
    /* float: right; */
    font-size: 4em
}

/*--------- 子元素设置 ---------*/
.container1{
    width: 600px;
    height: 400px;
    background-color: rgb(226, 168, 168);
    display: flex;
    /* 决定主轴的方向 */
    /* flex-direction: row; */
    /* 换行处理,，默认值为nowrap，即不换行 */
    /* flex-wrap: wrap; */
    /* flex-direction flex-wrap的缩写 */
    flex-flow: row nowrap;
    /* justify-content 处理主轴方向的对齐 */
    /*center space-between space-around */
    /* justify-content:space-around; */
    /* 如果主轴是x轴，主要是处理一行，否则就主要是处理一列 */
    /* align-items: baseline; */
    /* 主要是处理多排多列 */
    /* align-content: stretch */
    align-items: center;
}
.item1{
    width: 200px;
    height: 100px;
    background-color: rgb(196, 226, 168);
    /* border:1px solid black; */
    /* flex-shrink: 0; */

}
.item1:nth-child(2){
    /* width: 400px; */
    /* order: -1;     */
    /* flex-basis: 300px; */
    align-self: flex-start;
}
.item1:nth-child(6){
    /* order: -2;     */
}
.item1:nth-child(2){
    background-color: rgb(170, 139, 139);
    /* flex-grow: 1 */
}
.item1:nth-child(3){
    background-color: rgb(207, 206, 147);
    /* flex-grow: 4 */
    /* flex-shrink: 2 */
}
/* 200
50 */
.contaier3{
    width: 600px;
    height: 600px;
    background-color: rgb(196, 84, 84);
    /* display: flex;
    justify-content: center;
    align-items: center */
    position: relative;

}
.box{
    width: 100px;
    height: 100px;
    background-color: rgb(189, 187, 111);
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.big{
    width: 800px;
    height: 800px;
    background-color: lightcyan;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
}
.small{
    width: 32%;
    height: 32%;
    border: 1px solid red;
    background-color: rgb(173, 201, 120);
}